<!--
 * @Description: 
 * @Version: 2.0
 * @Author: , // 文件作者
 * @Date: 2023-07-04 21:53:18
 * @LastEditors: liujinkai
 * @LastEditTime: 2023-07-06 18:43:44
-->
<template>
  <div class="body">
    <div class="title">
      <h2>博雅书画学生信息管理系统</h2>
    </div>

    <div class="box">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class="demo-ruleForm fontcolor"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            type="password"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="4">
            <el-form-item label="验证码" prop="randomNumberInput">
              <el-input
                v-model.number="ruleForm.randomNumberInput"
                style="width: 100px; text-align: left"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="10">
            <img
              :src="randomNumber"
              alt="点击重新获取验证码"
              title="看不清，点击换一张"
              style="width: 100px; height: 60px"
              @click="resetRandomNumber"
            />
          </el-col>
          <!-- <div style="color: aliceblue;"> {{ this.randomNumber}}</div>  -->
        </el-row>
        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div></div>
  </div>
</template>

<script>
import { randomGet, loginPost } from "@/services";
export default {
  name: "Admin-user",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(" "));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        if (this.ruleForm.password !== "") {
          this.$refs.ruleForm.validateField("password");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        username: "",
        password: "",
        randomNumberInput: "",
      },
      rules: {
        username: [{ validator: validatePass, trigger: "blur" }],
        password: [{ validator: validatePass2, trigger: "blur" }],
        randomNumberInput: [{ validator: checkAge, trigger: "blur" }],
      },
      randomNumber: "",
      uuid:'',
    };
  },

  create() {},
  mounted() {
    this.getRandom();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let randomNumber = this.uuid;
          let username = this.ruleForm.username;
          let password = this.ruleForm.password;
          let randomNumberInput = this.ruleForm.randomNumberInput;
          let params = {
            randomNumber,
            username,
            password,
            randomNumberInput,
          };
          loginPost(params).then((res) => {
            console.log(res);
            if (res.data.msg === 'ok') {
              this.$router.push(
                {
            name:'Home',  
            // params:{id:item.id}   
                });
            }
          });
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getRandom() {
      randomGet().then((res) => {
        this.randomNumber = res.data.captcha;
        this.uuid=res.data.id;
        console.log( res);
      });

    },
    resetRandomNumber() {
      randomGet().then((res) => {
        this.randomNumber = res.data.captcha;

      });
    },
  },
};
</script>
<style lang="scss">
v-deep .fontcolor .el-form-item_lable {
  color: rgba(255, 255, 255, 0.9);
}
.body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: url(../../assets/img/bg.jpg) no-repeat;
  background-size: cover;
  .title {
    position: absolute;
    top: 10px;
    color: aliceblue;
    z-index: 99;
    font-size: 25px;

    h2 {
    }
  }
  .box {
    width: 350px;
    height: 350px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    background: rgba(50, 50, 50, 0.2);
    display: flex;
    // flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

    img {
      position: relative;
      margin-left: 10px;
      margin-top: -10px;
      object-fit: fill;
      transform: scale(0.6); /* 缩小为原来的 80% */
    }

    div {
    }
  }
  div {
  }
}
</style>
